﻿@{ 
<link href="~/css/table.css" rel="stylesheet" />
<script src="~/js/jquery-1.11.1.js"></script>
<script src="~/js/vue.js"></script>
}
<body onload="">
    <div id="app">
        <font color="black"> 您在做的业务是-人力资源-调动管理-调动登记列表 </font>
        <input id="first_kind_id" type="text" value="@ViewBag.first_kind_id"  hidden/>
        <input id="second_kind_id" type="text" value="@ViewBag.second_kind_id"  hidden/>
        <input id="third_kind_id" type="text" value="@ViewBag.third_kind_id" hidden />
        <input id="start" type="text" value="@ViewBag.start" hidden />
        <input id="end" type="text" value="@ViewBag.end"  hidden/>
        <br /><br /><br />
        <table width="100%" border="1" cellpadding=0 cellspacing=1
               bordercolorlight=#848284 bordercolordark=#eeeeee
               class="TABLE_STYLE1">
            <tr height="21">
                <td width="0" class="TD_STYLE1" hidden>
                    主键
                </td>
                <td width="19%" class="TD_STYLE1">
                    I级机构
                </td>
                <td width="19%" class="TD_STYLE1">
                    II级机构
                </td>
                <td width="19%" class="TD_STYLE1">
                    Ⅲ级机构
                </td>
                <td width="19%" class="TD_STYLE1">
                    薪酬标准
                </td>
                <td width="19%" class="TD_STYLE1">
                    名字
                </td>
                <td width="5%" class="TD_STYLE1">
                    调动
                </td>
            </tr>
            <tr v-for="(item,index) in dt" :key="item.huf_id" height="21">
                <td class="TD_STYLE2" hidden>
                    {{item.huf_id}}
                </td>
                <td class="TD_STYLE2">
                    {{item.first_kind_name}}
                </td>
                <td class="TD_STYLE2">
                    {{item.second_kind_name}}
                </td>
                <td class="TD_STYLE2">
                    {{item.third_kind_name}}
                </td>                 
                <td class="TD_STYLE2">
                    {{item.salary_standard_name}}
                </td>
                <td class="TD_STYLE2">
                    {{item.human_name}}
                </td>
                <td class="TD_STYLE2">
                    <a :href="'/diaodongguanli/register/'+[item.huf_id]">
                        调动
                    </a>
                </td>
            </tr>
        </table>
        <p>
            <div align="center" style="font-size: 18px;color: gray">
                &nbsp;&nbsp;总数：
                <font style="color: maroon;font-weight: bold;">{{rows}}</font>
                例
                &nbsp;&nbsp;&nbsp;
                每页显示 <font style="color: maroon;font-weight: bold;">{{pageSize}}</font>
                条
                &nbsp;&nbsp;&nbsp;
                当前第 <font style="color: maroon;font-weight: bold;">{{currentpage}}</font>
                页
                &nbsp;&nbsp;&nbsp;共
                <font style="color: maroon;font-weight: bold;">{{pages}}</font>
                页
                <a style="color: navy;font-weight: bold" v-on:click="first()">首页</a>

                <a style="color: navy;font-weight: bold"
                   v-on:click="prex()">上一页</a>

                <a style="color: navy;font-weight: bold"
                   v-on:click="next()">下一页</a>

                <a style="color: navy;font-weight: bold"
                   v-on:click="last()">末页</a>
                &nbsp;&nbsp;&nbsp;跳到第
                <input id="page" type="text" value="1" class=input1 size=1>
                页&nbsp;&nbsp;
                <input type="image" src="~/images/go.bmp" v-on:click="tiao()" width=18 height=18 border=0>
                <input type="hidden" name="page.startPage" id="startpage" value="1">
            </div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            dt: [],
            rows: 0,
            pages: 0,
            pageSize: 3,
            currentpage: 1,
        },
        methods: {
            load: function () {
                var t = this;
                $.ajax({
                    url: "/diaodongguanli/register_list1?currentpage=" + t.currentpage,
                    type: "post",
                    data: { "first_kind_id": $("#first_kind_id").val(), "second_kind_id": $("#second_kind_id").val(), "third_kind_id": $("#third_kind_id").val(), "start": $("#start").val(), "end": $("#end").val() },
                    success: function (msg) {
                        var dr = eval(msg);
                        t.dt = dr["dt"];
                        t.rows = dr["rows"];
                        t.pages = dr["pages"];
                    }
                })
            },
            first: function () {
                var t = this;
                t.currentpage = 1;
                t.load();
            },
            last: function () {
                var t = this;
                t.currentpage = t.pages;
                t.load();
            },
            prex: function () {
                var t = this;
                if (t.currentpage > 1) {
                    t.currentpage--;
                } else {
                    t.currentpage = 1;
                }
                t.load();
            },
            next: function () {
                var t = this;
                if (t.currentpage < t.pages) {
                    t.currentpage++;
                } else {
                    t.currentpage = t.pages;
                }
                t.load();
            },
            tiao: function () {
                var t = this;
                var page = $("#page").val();
                var zw = /^[0-9]*$/;
                if (!zw.test(page)) {
                    t.currentpage = 1;
                } else if (page > t.pages) {
                    t.currentpage = 1;
                    $("#page").val('1');
                } else if (page < t.currentpage) {
                    t.currentpage = 1;
                    $("#page").val('1');
                } else {
                    t.currentpage = page;
                    $("#page").val('1');
                }
                t.load();
            }
        },
        mounted: function () {
            this.load();
        },
        filters: {
            odate: function (d) {
                var time = new Date(d);
                var y = time.getFullYear();
                var m = time.getMonth();
                var d = time.getDate();
                return y + "年" + m + "月" + d + "日";
            }
        }
    })
</script>


